<template>
<div style="width: 90%;margin:auto;height: 100%; display: flex;">
    <!-- 头像 -->
    <div style="width: 300px;height:100%; margin-top: 10px;">
    <div style="width: 300px;height: 250px; background-color: #fff;margin: auto;" >
        <img style="width: 150px; height: 150px;" src="../zizujian/time.png" alt="">
        <div style="position: relative; width: 150px; height: 200px;  margin-left: 150px;text-align: center;margin-top: -100px;">
            <p style="color: #000; font-size: 20px;font-weight: 400; ">admin</p> 
               <p style=" color:darkgrey; font-size: 17px;">  超级管理员</p>
            </div>
           <hr style="width: 280px; margin: auto; margin-top: -90px;">
           <div style="margin-left: 10px; margin-top: 10px;">
            <p style="color: darkgrey;">上次登录时间：&emsp;&emsp;&emsp;<span style="color: black;">2022-4-3</span></p>

            
          <p style="color: darkgrey;">上次登录地点：&emsp;&emsp;&emsp;<span style="color: black;">成都</span></p>
           </div>
    </div>
    <div style="width: 300px;height: 416px;  margin-top: 10px;">
        <table cellspacing="0" style=" margin: auto;width: 100%;height: 416px; text-align: center;background-color: #fff;color: darkgrey;">
        <thead>
          <tr>
            <th>手机</th>
            <th>今日购买</th>
            <th>本月购买</th>
            <th>总购买</th>
          </tr>
          <tr v-for="(arr, index) in $store.state.guanlixito.arr" :key="index">
            <td>{{ arr.name }}</td>
           <td>{{ arr.jinrgomai }}</td>
            <td>{{ arr.benyuegomai }}</td>
            <td>{{ arr.jinrgomai + arr.benyuegomai }}</td>
            </tr>
        </thead>
      </table>
    </div>
</div>
    <!-- 今日订单 -->
    <div style=" width: 80%; height: 100%; margin-top: 10px;">

    <div style=" width: 100%; height: 200px; display: flex;flex-wrap: wrap;align-content: space-around;justify-content: space-around;">
        <div class="jingrdingdan">
            <div style="width: 26%;height: 100%; background-color:  rgb(46,199,201);"><i class="el-icon-circle-check" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
            <div style="width: 60%;height: 100%; text-align: center;"> 
                <h1 style="margin-top: 10px;">￥122</h1>
               <p style="color:darkgrey;">今日支付订单</p>
            </div>
        </div>
        <div class="jingrdingdan">
            <div style="width: 26%;height: 100%; background-color:  rgb(255,185,128);"><i class="el-icon-star-on" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
            <div style="width: 60%;height: 100%; text-align: center;"> 
                <h1 style="margin-top: 10px;">￥21</h1>
               <p style="color:darkgrey;">今日收藏订单</p>
            </div>
        </div>  <div class="jingrdingdan">
            <div style="width:26%;height: 100%; background-color:  rgb(90,177,239);"><i class="el-icon-s-goods" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
            <div style="width: 60%;height: 100%; text-align: center;"> 
                <h1 style="margin-top: 10px;">￥13</h1>
               <p style="color:darkgrey;">今日未支付订单</p>
            </div>
        </div> 
         <div class="jingrdingdan">
            <div style="width: 26%;height: 100%; background-color:  rgb(46,199,201);"><i class="el-icon-circle-check" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
            <div style="width: 60%;height: 100%; text-align: center;"> 
                <h1 style="margin-top: 10px;">￥3834</h1>
               <p style="color:darkgrey;">本月支付订单</p>
            </div>
        </div>  
        <div class="jingrdingdan">
            <div style="width:26%;height: 100%; background-color:  rgb(255,185,128);"><i class="el-icon-star-on" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
            <div style="width: 60%;height: 100%; text-align: center;"> 
                <h1 style="margin-top: 10px;">￥122</h1>
               <p style="color:darkgrey;">本月收藏订单</p>
            </div>
        </div>
        <div class="jingrdingdan">
            <div style="width: 26%;height: 100%; background-color:  rgb(90,177,239);"><i class="el-icon-s-goods" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
            <div style="width: 60%;height: 100%; text-align: center;"> 
                <h1 style="margin-top: 10px;">￥120</h1>
               <p style="color:darkgrey;">本月未支付订单</p>
            </div>
        </div>
    </div>
    <div id="main1" style="width: 900px;height:200px;background-color: #fff; margin: auto;margin-top: 20px;"></div>
    <div style="width: 900px;height:236px;background-color: #fff; margin: auto;margin-top: 20px;display: flex;justify-content: space-around;">
        <div id="main" style="width: 440px;height:236px;background-color: #fff; " ></div>
        <div id="main2" style="width: 440px;height:236px;background-color: #fff; "></div>
    </div>
    
    </div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
   
}
},
mounted(){
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
// 绘制图表
var option1 = {
    // title: 图表标题
  title: {
    text: ''
  },
//  tooltip: 提示框组件，鼠标悬停在数据点上时显示的提示信息
  tooltip: {
    trigger: 'axis'
  },
//  legend: 图例组件，用于展示每个系列的名称和颜色
  legend: {
    data: ['小米', 'vivo', '华为', 'oppo', '苹果','三星',]
  },
//   grid: 直角坐标系内绘图网格的相关设置，包括位置、大小等
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
//   toolbox: 工具箱组件，提供一些常用的工具，如保存为图片等
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {}
    }
  },
//   xAxis: 直角坐标系中的横轴，通常为类目轴或数值轴
  xAxis: {
    type: 'category',
    data:[] ,
    boundaryGap: false,
   
  },
//   yAxis: 直角坐标系中的纵轴，通常为数值轴
  yAxis: {
    type: 'value',
    data:[]   
  },
//   series: 数据系列，可以有多个系列，每个系列包含名称、类型、数据等信息
  series: [
    {
      name: '小米',
      type: 'line',
      stack: 'Total',
      data: [1220, 1322, 1021, 1324, 2290, 2230, 2210]
    },
    {
      name: 'vivo',
      type: 'line',
      stack: 'Total',
      data: [2220, 1282, 1291, 2342, 2902, 3230, 3210]
    },
    {
      name: '华为',
      type: 'line',
      stack: 'Total',
      data: [1150, 2322, 2021, 1524, 2190, 3230, 2410]
    },
    {
      name: 'oppo',
      type: 'line',
      stack: 'Total',
      data: [1320, 2332, 3301, 2334, 1390, 3230, 3120]
    },
    {
      name: '苹果',
      type: 'line',
      stack: 'Total',
      data: [1820, 1932, 1901, 1934, 3290, 1330, 2320]
    },{
      name: '三星',
      type: 'line',
      stack: 'Total',
      data: [2200, 1820, 1910, 2340, 2900, 3300, 3100]
    },
  ]
};
var option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
    // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
    // 如果不指定 dimensions，也可以通过指定 series.encode
    // 完成映射，参见后文。
    dimensions: ['product',  '新增用户', '活跃用户'],
    source: [
      { product: '周一',  '新增用户': 185.8, '活跃用户': 400},
      { product: '周二·',  '新增用户': 200.8, '活跃用户': 500},
      { product: '周三',  '新增用户': 300.8, '活跃用户': 555 },
      { product: '周四',  '新增用户': 185.8, '活跃用户': 444 },
      { product: '周五',  '新增用户': 99.4, '活跃用户': 666 },
      { product: '周六',  '新增用户': 77, '活跃用户': 450 },
      { product: '周天', '新增用户': 400, '活跃用户': 250 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }]
};
var option2 = {
  title: {
    text: '手机销量',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 2200, name: '小米' },
        { value: 4600, name: 'vivo' },
        { value: 3800, name: '华为' },
        { value: 1950, name: 'oppo' },
        { value: 6000, name: '苹果' },
        { value: 3050, name: '三星' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
myChart.setOption(option);
myChart1.setOption(option1);
myChart2.setOption(option2);

},
created(){
},
computed:{
},
methods:{
},
}
</script>
<style lang='less' scoped>
.jingrdingdan{
    width: 28%;
    height: 66px;
    border-radius: 5px;
    display: flex;
    background-color: #fff;
}
td,
th {
  border-top: 1px solid #e7e1e1;
  border-bottom: 1px solid #e7e1e1;
  border-left: 0;
  border-right: 0;
}
</style>
